<!--
 * @Author: trk trk990920@163.com
 * @Date: 2022-03-08 13:56:17
 * @LastEditors: trk trk990920@163.com
 * @LastEditTime: 2022-07-29 14:52:26
 * @Description: 全局头部组件
-->
<template>
  <div class="headerWrap">
    <div class="flex-row">
      <div class="flex-row">
        <Hamburger
          class="mr-8"
          :is-active="sidebar.opened"
          @toggle-click="toggleSideBar"
        />
        <BreadCrumb />
      </div>
      <div class="right-menu">
        <Screenfull class="right-menu-item hover-effect" />
        <el-dropdown trigger="click" class="avatar-container right-menu-item hover-effect" placement="bottom-end">
          <svg-icon class="avatar-wrapper" name="operaUser" size="40px"></svg-icon>
          <template #dropdown>
            <el-dropdown-menu>
              <el-dropdown-item
                @click="logout"
                ><router-link to="/login">退出登录</router-link>
              </el-dropdown-item>
            </el-dropdown-menu>
          </template>
        </el-dropdown>
      </div>
    </div>
    <TagsView />
  </div>
</template>
<script lang='ts'>
import BreadCrumb from '@/components/bread-crumb/Index.vue'
import Hamburger from '@/components/hamburger/index.vue'
import Screenfull from '@/components/screenfull/index.vue'
import TagsView from '../tags_view/index.vue'

import { defineComponent, reactive, computed, toRefs } from 'vue'
import { sideBarStore } from '@/store/modules/sideBar'
import { useUserStore } from '@/store/modules/user'
export default defineComponent ({
  components: {
    BreadCrumb,
    Hamburger,
    Screenfull,
    TagsView
  },
  setup(_, context) {   
    const sidebar = computed(() => {
      return sideBarStore()
    })
    // todo something
    const state = reactive({
      toggleSideBar: (status: boolean) => {
        return sideBarStore().setOpened(status)
      },
      logout: () => {
        useUserStore().logout()
      }
    })
    return {
      sidebar,
      ...toRefs(state)
    }
  }
})
</script>
<style lang='scss' scoped>
.headerWrap {
  height: 84px;
  padding-right: 24px;
}
  .right-menu {
    float: right;
    height: 100%;
    line-height: 50px;
    display: flex;
    align-items: center;
    &:focus {
      outline: none;
    }

    .right-menu-item {
      display: inline-block;
      padding: 0 8px;
      height: 100%;
      font-size: 18px;
      color: #5a5e66;
      vertical-align: text-bottom;

      &.hover-effect {
        cursor: pointer;
        transition: background 0.3s;

        &:hover {
          background: rgba(0, 0, 0, 0.025);
        }
      }
    }

    .avatar-container {
      .avatar-wrapper {
        margin-top: 5px;
        margin-right: 16px;
        margin-left: 16px;
        position: relative;

        .user-avatar {
          cursor: pointer;
          width: 40px;
          height: 40px;
          border-radius: 10px;
        }

        .el-icon-caret-bottom {
          cursor: pointer;
          position: absolute;
          right: -20px;
          top: 25px;
          font-size: 12px;
        }
      }
    }
  }
</style>
